<template>
  <div>
  </div>
</template>

<script>
  import {osshost} from '@/api/util/fetch';

  export default {
    name: 'previewImg',
    props:{
      list:{
        type:Array,
        required:true,
        default:()=>{
          return [];
        }
      }
    },
    data()
    {
      return {
        images:[],
      }
    },
    mounted()
    {
      this.setup(this.list);
    },
    watch:{
      list(val)
      {
        if(val && val.length)
        {
          this.setup(val);
        }
      }
    },
    methods: {
      getUrl(url)
      {
        if(url && url !=='undefined')
        {
          if(url.indexOf('https://')===0 || url.indexOf('http://')===0)
          {
            return url;
          }
          else
          {
            return osshost + url;
          }
        }
      },
      setup(imgs)
      {
        let images = [];
        for(let i=0;i<imgs.length;i++)
        {
          let img = new Image();
          img.src = this.getUrl(imgs[i].url);
          img.onload = ()=>{
            images[i] = {src:img.src,w:img.width,h:img.height};
          }
        }

        setTimeout(()=>{
          this.images = images;
        },300);
      },
      previewImg(index)
      {
        this.$preview.open(index, this.images,{
          bgOpacity:0.6,
          shareEl:false,
          mainClass:'pswp-customer',
        },);
      },
      preview(index, list) //主动触发预览
      {
        this.setup(list);
        setTimeout(()=>{
          this.previewImg(index);
        },300);
      },
    }
  }
</script>

<style lang="less" scoped>

</style>